<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="lib/echarts.common.min.js"></script>
    <script type="text/javascript" src="lib/jquery-1.8.3.js"></script>

</head>
<body>

<div id="main" style="border: 1px solid red;width: 700px;height: 600px" align="center"></div>

<script type="text/javascript">
    var myChart=echarts.init(document.getElementById("main"));
    myChart.setOption({
        title: {
            x: 'center',
            text: '入库数量统计图',
            subtext: 'Rainbow bar example',
            link: 'http://localhost:8080'
        },
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: true,
                data:[]
            }
        ],
        series: [
            {
                name: 'ECharts例子个数统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)',
                        formatter: function(params){
                            return '<img src="'
                                + params.data.symbol.replace('image://', '')
                                + '"/>';
                        }
                    },
                    data: [
                        {xAxis:0, y: 350, name:'Line', symbolSize:20, symbol: 'image://../asset/ico/折线图.png'},
                        {xAxis:1, y: 350, name:'Bar', symbolSize:20, symbol: 'image://../asset/ico/柱状图.png'},
                        {xAxis:2, y: 350, name:'Scatter', symbolSize:20, symbol: 'image://../asset/ico/散点图.png'},
                        {xAxis:3, y: 350, name:'K', symbolSize:20, symbol: 'image://../asset/ico/K线图.png'},
                        {xAxis:4, y: 350, name:'Pie', symbolSize:20, symbol: 'image://../asset/ico/饼状图.png'},
                        {xAxis:5, y: 350, name:'Radar', symbolSize:20, symbol: 'image://../asset/ico/雷达图.png'},
                        {xAxis:6, y: 350, name:'Chord', symbolSize:20, symbol: 'image://../asset/ico/和弦图.png'},
                        {xAxis:7, y: 350, name:'Force', symbolSize:20, symbol: 'image://../asset/ico/力导向图.png'},
                        {xAxis:8, y: 350, name:'Map', symbolSize:20, symbol: 'image://../asset/ico/地图.png'},
                        {xAxis:9, y: 350, name:'Gauge', symbolSize:20, symbol: 'image://../asset/ico/仪表盘.png'},
                        {xAxis:10, y: 350, name:'Funnel', symbolSize:20, symbol: 'image://../asset/ico/漏斗图.png'},
                    ]
                }
            }
        ]
    });

    var names = []  //货物入库时间 用来盛放X轴坐标信息
    var num = []  //货物数量信息 用来盛放Y轴坐标信息


    var hid = $("input:hidden[name='hid']").val();
    var hid1 = $("input:hidden[name='hid1']").val();
    var qssj = '${listwu1.qssj}';
    var zzsj = '${listwu1.zzsj}';

    $.ajax({
        url:"EchartsListServlet",
        type:"post",
        async:"true",
        dataType:"json",
        success:function (result) {
            if (result){
                var obj=eval(result);
                for (let i = 0; i < obj.length; i++) {
                    names.push(result[i].insDate);
                    num.push(result[i].insNumber);
                }
                myChart.setOption({
                    xAxis:{
                        data:names
                    },
                    series:[{
                        name:"入库数量",
                        data:num
                    }]
                })
            }
        }, error: function (errorMsg) {
            //请求失败时执行该函数
            alert(hid + hid1 + qssj + zzsj);
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
</body>
</html>